<template>
    <!-- 文件审核 马佳乐 -->
    <div>
        <!-- <video v-if="ThePreviewOpens" :src="aaaa" controls width="40%" height="auto"></video> -->
        <el-col style="margin-top: 20px">
            <el-table :data="fileArray" style="width: 100%" align="center">
                <el-table-column prop="fileManagerName" label="文件名">
                </el-table-column>
                <el-table-column prop="size" label="大小(MB)">
                </el-table-column>
                <el-table-column prop="fileType" label="文件类型">
                </el-table-column>
                <el-table-column prop="nickName" label="上传人">
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期">
                </el-table-column>
                <el-table-column prop="auditType" label="审核状态">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.auditType==0">
                            尚未审核
                        </el-tag>
                        <el-tag type="success" v-else-if="scope.row.auditType==1">
                            审核通过
                        </el-tag>
                        <el-tag type="danger" v-else-if = "scope.row.auditType==2">
                            审核失败
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" @click="download(scope.row.fileManagerId,scope.row.fileManagerName)">下载</el-button> -->
                        <!-- <el-button type="primary" @click="LargeFilesDownload(scope.row.fileManagerId,scope.row.fileManagerName)">大文件下载</el-button> -->
                        <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="Preview(scope.row.filePath)"><i class="el-icon-share"></i>预览</span></el-button>
                        <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="updatedelete(scope.row)" type="primary"><i class="el-icon-document-checked"></i>审核通过</span></el-button>
                        <el-button type="primary" size="small" style="background:none;border:0px"><span style="color:#409EFF;" @click="updatedeletes(scope.row)" type="danger"><i class="el-icon-document-delete"></i>审核失败</span></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[5,10, 20, 30, 40]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>
            <div class="div1111">
                <video v-if="ThePreviewOpens" :src="aaaa" controls width="100%" height="100%"></video>
            </div>
        </el-col>
    </div>
</template>

<script>
export default {
    data () {
        return {
            filePath:null,
            ThePreviewOpens:false, // 用于显示视频预览
            page: {
                total: 0, // 数据总条数
                pageNum: 1, // 当前页
                pageSize: 5// 每页条数
            },
            fileArray: [], // 查询所有文件
            // user: JSON.parse(localStorage.getItem("user"))
        }
    },
    mounted () {
        this.queryFile ()
    },
    methods: {
        // 视频预览
        Preview (filePath) {
            // console.log(filePath);
            this.aaaa = filePath
            this.ThePreviewOpens = true
        },
        // 查询所有文件
      queryFile () {
        this.request.get('/videoManage/queryVideoManage', {
          params: {
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize,
            fileManagerName: this.fileManagerName,
            // uploadedBy: this.user.id
          }
        }).then(res => {
          if (res.data) {
            this.fileArray = res.data.content
            this.page.total = res.data.totalSize
            // console.log(this.user.password)
          }
        })
      },
      handleSizeChange (val) { // 分页
        this.page.pageSize = val
        this.queryFile()
      },
      handleCurrentChange (val) { // 分页
        this.page.pageNum = val
        this.queryFile()
      },
      // 用户表逻辑删除
      updatedelete (data) {
            this.$confirm('是否通过该文件', '提示', {
                confirmButtonClass: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                this.$axios.delete('/videoManage/auditSucceed', {
                params: {
                    fileManagerId: data.fileManagerId,
                    userId: data.userId
                }
                }).then(res => {
                if (res.data.flag) {
                    this.queryFile()
                    this.$message({ message: '审核成功!', type: 'success' })
                } else {
                    this.Mymessage('waning', '审核失败!')
                }
                }).catch(res => {
                this.Mymessage('error', '审核失败,请联系管理员')
                })
            }).catch(() => {
                this.Mymessage('info', '已取消审核')
            })
        },
        // 用户表逻辑删除
      updatedeletes (data) {
        this.$confirm('是否不通过该文件', '提示', {
                confirmButtonClass: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                this.$axios.delete('/videoManage/auditFail', {
                    params: {
                    fileManagerId: data.fileManagerId,
                    userId: data.userId
                }
                }).then(res => {
                if (res.data.flag) {
                    this.queryFile()
                    this.Mymessage('waning', '拒绝通过成功!')
                    // this.$message({ message: '拒绝通过成功!', type: 'success' })
                } else {
                    // this.Mymessage('waning', '拒绝通过失败!')
                    this.$message({ message: '拒绝通过失败!', type: 'success' })
                }
                }).catch(res => {
                this.Mymessage('error', '拒绝失败,请联系管理员')
                })
            }).catch(() => {
                this.Mymessage('info', '已取消审核')
            })
        },
        // 弹窗提示
        Mymessage (type, text) { 
        this.$message({
            showClose: true,
            message: text,
            type: type
        })
        }
    }
}
</script>

<style>
    .div1111{
        width: 770px;
        height: 570px;
        /* background: red; */
    }
</style>